<template>
    <div class="message-msgCell">
        <van-cell-group>
            <van-cell size="large"
                @click="onClick(item)"
                :style="{ backgroundColor: is_top ? 'rgb(242, 242, 242)' : '' }"
            >
                <!-- 头像 -->
                <template #icon>
                    <van-image round fit="cover" width="3.125rem" height="3.125rem"
                        :src="image"
                    />
                </template>
                <!-- 用户名 -->
                <template #title>
                    <span class="text"> {{ title }} </span>
                </template>
                <!-- 信息内容 -->
                <template #label>
                    <!-- 溢出隐藏没弄好 -->
                    <span class="text messageTXT" 
                        v-html="messageTxt"
                    />
                </template>
                <!-- 时间 -->
                <template #right-icon>
                    <ul>
                        <li>{{ lastSendDate }}</li>
                        <van-badge :content="item.unread_count ? item.unread_count : ''" />
                    </ul>
                </template>
            </van-cell>
        </van-cell-group>
    </div>
</template>

<script>
    import { mapMutations, mapState } from 'vuex';

    export default {
        props: ["item", "is_top", "index", "messageType"],
        computed: {
            ...mapState(['friendList', 'groupChatList', 'user', 'lastMessageList', 'topMessages']),
            lastSendDate() {
                const date = new Date(this.item.date);
                const year = date.getFullYear();
                const month = date.getMonth();
                const days = date.getDay();
                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');

                const diff = Math.abs(Date.now() - this.item.date);
                const diffDays = Math.floor(diff / (1000 * 60 * 60 * 24)) % 30;

                if (diffDays == 0) 
                    return hours + " : " + minutes;
                else if (diffDays == 1) 
                    return "昨天 " + hours + " : " + minutes;
                else 
                    return year + "-" + month + " : " + days;
            },
            title() {
                if (this.item.is_groupChat) {
                    return this.groupChatList.find(item => item._id == this.item.addresser).groupName;
                } else {
                    if (this.item.sender == this.user._id)
                        return this.friendList.find(item => item.friendId._id== this.item.addresser).friendId.nickname;
                    else
                        return this.friendList.find(item => item.friendId._id== this.item.sender).friendId.nickname;
                }
            },
            image() {
                if (this.item.is_groupChat) {
                    return this.groupChatList.find(item => item._id == this.item.addresser).groupAvatar;
                } else {
                    if (this.item.sender == this.user._id)
                        return this.friendList.find(item => item.friendId._id == this.item.addresser).friendId.headImgUrl;
                    else
                        return this.friendList.find(item => item.friendId._id == this.item.sender).friendId.headImgUrl;
                }
            },
            messageTxt() {
                if (!this.item.content) return;

                if (this.item.is_groupChat) {
                    const groupChat = this.groupChatList.find(item => item._id == this.item.addresser);
        
                    return groupChat.members.find(item => item._id == this.item.sender).nickname + 
                    ': ' +
                    this.item.content.replace(
                        /\[(\d+\.gif)\]/g, 
                        '<img src="./gif/$1" width="24" height="24" style="vertical-align: middle;" ">'
                    );
                } else {
                    return this.item.content.replace(
                        /\[(\d+\.gif)\]/g, 
                        '<img src="./gif/$1" width="24" height="24" style="vertical-align: middle;" ">'
                    );                
                }
            },
        },
        methods: {
            ...mapMutations(['clearUnreadCount']),
            onClick(value) {
                this.clearUnreadCount([this.index, this.messageType]);

                if (value.is_groupChat) {
                    this.$router.push({ path: '/chat', query: { groupChat_id: value.addresser } });
                } else {
                    if (this.item.sender == this.user._id)
                        this.$router.push({ path: '/chat', query: { user_id: value.addresser } });
                    else
                        this.$router.push({ path: '/chat', query: { user_id: this.item.sender } });
                }
            },
        }
    };
</script>

<style lang="less" scoped>
    .message-msgCell {
        .van-cell-group {
            .van-cell {
                .text {
                    padding-left: 0.625rem;
                }
                .messageTXT {
                    display: inline-block;
                    white-space: nowrap;
                    width: 10rem;
                    height: 1.5rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 1.0625rem;
                }
            }
        }
    }
</style>
